
let ul1=document.querySelector('.menu .ul1')
let ul2=document.querySelector('.menu .ul2')


// 店铺下拉栏渲染
let xhr =new XMLHttpRequest()
xhr.open('get','http://chst.vip:1234/api/getgsshop',true)
xhr.onload=function(){
    if(xhr.status===200){
        let res =JSON.parse(xhr.responseText)
        let an=res .result
        let lis=''
        console.log(an);
        an.forEach(item => {
            lis+=`
            <li shopId=${item.shopId}>
            ${item.shopName}
            </li>
            `   
        });
        ul1.innerHTML=lis
    }
}
xhr.send(null)



let downa=document.querySelector('.down .downa')
let span1=document.querySelector('.down .downa span')
let span2=document.querySelector('.down .downb span')
var shopId=0
var areaId=0
let mainul=document.querySelector('.main ul')
let p1=document.querySelector('.down .downa .p1')
let p2=document.querySelector('.down .downb .p2')
let menu=document.querySelector('.menu')

menu.addEventListener('click',function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.getAttribute('shopId')){
        shopId=target.getAttribute('shopId')
        p1.innerHTML=target.innerText
        ul1.style.display='none'
        span1.innerHTML='▼'
        flag=true

    }else if(target.getAttribute('areaId')){
        areaId=target.getAttribute('areaId')
        p2.innerHTML=target.innerText.substring(0,2)
        ul2.style.display='none' 
        span1.innerHTML='▼'   
        fl=true
    }

let xhr2 =new XMLHttpRequest()
xhr2.open('get',`http://chst.vip:1234/api/getgsproduct?shopid=${shopId}&areaid=${areaId}`,true)
xhr2.onload=function(){
    if(xhr2.status===200){
        let res2 =JSON.parse(xhr2.responseText)
        let an2=res2 .result
        let lqs=''
        an2.forEach(item => {
            lqs+=`
            <li>
                <img src="${item.productImg}" alt="">
                <p class="p1">${item.productName}</p>
                <p class="p2">${item.productPrice}</p>
            </li>
            `   
        });
        mainul.innerHTML=lqs
    }
}
xhr2.send(null)
})


// 给店铺下拉栏绑定点击下拉事件
flag=true
downa.onclick=function(){
    if(ul2.style.display='block') {
        ul2.style.display='none'
        span2.innerHTML='▼'
    }

    if(flag){
        ul1.style.display='block'
        flag=false
        span1.innerHTML='▲'
    }else{
        ul1.style.display='none'
        flag=true
        span1.innerHTML='▼'
    }
}
let downb=document.querySelector('.down .downb')

// 给地区下拉栏绑定点击下拉事件
fl=true
downb.onclick=function(){ 
    if(ul1.style.display='block') {
        ul1.style.display='none'
        span1.innerHTML='▼'
    }

    if(fl){
        ul2.style.display='block'
        fl=false
        span2.innerHTML='▲'
    }else{
        ul2.style.display='none'
        fl=true
        span2.innerHTML='▼'
    } 
}

// 地区下拉栏渲染
let xhr1 =new XMLHttpRequest()
xhr1.open('get','http://chst.vip:1234/api/getgsshoparea',true)
xhr1.onload=function(){
    if(xhr1.status===200){
        let res1 =JSON.parse(xhr1.responseText)
        let an1=res1 .result
        let las=''
        console.log(an1);
        an1.forEach(item => {
            las+=`
            <li areaId=${item.areaId}>${item.areaName}</li>
            ` 
        });
        ul2.innerHTML=las
    }
}
xhr1.send(null)


// 中间内容数据渲染
let xhr2 =new XMLHttpRequest()
xhr2.open('get',`http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0`,true)
xhr2.onload=function(){
    if(xhr2.status===200){
        let res2 =JSON.parse(xhr2.responseText)
        let an2=res2 .result
        let lqs=''
        // console.log(res2);
        an2.forEach(item => {
            lqs+=`
            <li>
                <img src="${item.productImg}" alt="">
                <p class="p1">${item.productName}</p>
                <p class="p2">${item.productPrice}</p>
            </li>
            `   
        });
        mainul.innerHTML=lqs
    }
}
xhr2.send(null)











